<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />

    <link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/H-ui.admin.css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/lib/Hui-iconfont/1.0.8/iconfont.css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/skin/default/skin.css" id="skin" th:href="@{/h-ui.admin/skin/default/skin.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/style.css" th:href="@{/h-ui.admin/css/style.css}"/>
    <link rel="stylesheet" href="../../static/Semantic-UI-master/dist/semantic.min.css" th:href="@{/Semantic-UI-master/dist/semantic.min.css}">
    <link rel="stylesheet" href="../../static/css/custom.css" th:href="@{/css/custom.css}">

    <!--/meta 作为公共模版分离出去-->

    <link href="lib/webuploader/0.1.5/webuploader.css" th:href="@{lib/webuploader/0.1.5/webuploader.css}" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-container">
    <div style="width: 100%;">
        <p class="font-x-center font-size-big">发布课程视频</p>
    </div>
    <form method="post" class="form form-horizontal" id="uploadForm" name="uploadForm">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">课程ID：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input readonly="readonly" class="input-text" id="courseId" name="courseId"  th:value="${session.courseshow.courseId}">
                <p><span class="c-red">*</span>课程ID不可修改</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>视频名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="videoName" name="videoName">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>这是第几小节：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="请输入阿拉伯数字来表示" id="chapter" name="chapter">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>视频上传：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input hidden type="file" name="videoData" id="videoData" class="videoData" onchange="showImg(this)">
                <button href="javascript:void(0);" onclick="openFile();" type="button" class="ui button teal mini">上传视频</button>
                <span><span class="c-red">*</span>一次只能上传一个视频</span>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">视频ID：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <p><span id="videourl">https://.................</span><span>（可用来播放视频）</span></p>
            </div>
        </div>
        <div class="row cl">
            <!--            进度条-->
            <label class="form-label col-xs-4 col-sm-2"></label>
            <div class="formControls col-xs-8 col-sm-9">
                <p>
                <div style="height: 100px;width: 200px;" name="jindutiao" hidden id="jindutiao">
                    <img style="height: 100px;width: auto;" th:src="@{/imges/jindutiao1.gif}" src="../../static/imges/jindutiao1.gif">
                </div>
                </p>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button onClick="video_save_submit();" class="btn btn-primary radius" id="uploadvideo" disabled="disabled" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存并提交</button>
                <button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>

</div>

<!--_footer 作为公共模版分离出去-->
<script src="../../static/js/jquery-3.5.1.min.js" th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script src="../../static/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script>
<script src="../../static/Semantic-UI-master/dist/semantic.min.js" th:src="@{/Semantic-UI-master/dist/semantic.min.js}"></script>
<script src="../../static/js/sy.min.js" th:src="@{/js/sy.min.js}"></script>
<script type="text/javascript" src="../../static/lib/layer/2.4/layer.js" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" src="../../static/h-ui/js/H-ui.min.js" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.js" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../static/lib/My97DatePicker/4.8/WdatePicker.js" th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/jquery.validate.js" th:src="@{/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/validate-methods.js" th:src="@{/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/messages_zh.js" th:src="@{/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript" src="../../static/lib/webuploader/0.1.5/webuploader.min.js" th:src="@{/lib/webuploader/0.1.5/webuploader.min.js}"></script>
<script type="text/javascript" src="../../static/lib/ueditor/1.4.3/ueditor.config.js" th:src="@{/lib/ueditor/1.4.3/ueditor.config.js}"></script>
<script type="text/javascript" src="../../static/lib/ueditor/1.4.3/ueditor.all.min.js" th:src="@{/lib/ueditor/1.4.3/ueditor.all.min.js}"> </script>
<script type="text/javascript" src="../../static/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js" th:src="@{/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js}"></script>
<script type="text/javascript">
    function openFile() {
        $("#videoData").trigger("click");
    }
    //前端上传视频
    function showImg(obj){
        var patter = /(\.*.mp3$)|(\.*.mp4$)|(\.*.wmv$)|(\.*.mov$)|(\.*.MP3$)|(\.*.MP4$)|(\.*.WMV$)|(\.*.MOV$)/;
        if(!patter.test($(obj).val())){
            alert('系统不支持图片的格式');
        }else {
            var file = obj.files[0];
            var l = window.URL.createObjectURL(file)
            $("#uploadvideo").removeAttr("disabled");
        }
    }

//提交保存
    function video_save_submit() {
        var formdata = new FormData(document.getElementById("uploadForm"));

        const courseId = $("#courseId").val();
        const videoName = $("#videoName").val();
        const chapter= $("#chapter").val();

        if(courseId.length==0 || videoName.length==0 || chapter.length==0){
            alert("不允许留空")
            return false;
        }
        if(isNaN(chapter)){
            alert("小节请用阿拉伯数字表示")
            return false;
        }
        $("#jindutiao").show();
        $.ajax({
            type:'POST',
            url:'/sy/video/uploadvideo',
            data: formdata,
            processData:false,
            contentType:false,
            async: false,
            cache: true,
            success:function(data){
                $("#jindutiao").hide();
                $("#videourl").text(data);
                alert("确认回到视频概览")
                window.location.replace("/sy/course/courseview");


            },
            error:function(){
                alert("出错了")
            }

        })
    }

</script>
</body>
</html>